<%@page import="com.fishing.util.DateUtil"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!doctype html>
<html>
<head>
<title>抽水统计</title>
<base href="<%=basePath%>" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="apple-touch-icon-precomposed" href="i/app-icon72x72@2x.png">
<meta name="apple-mobile-web-app-title" content="Amaze UI" />
<link rel="stylesheet" href="layui/css/layui.css" media="all" />
<style type="text/css">
</style>
</head>
<%
	String today = new SimpleDateFormat("yyyy-MM-dd").format(new Date());
%>
<body>
<br/>
		<div class="portlet-title">
			<div class="caption bold">
				<span style="font-size:18px;color:#1d953f;">抽放水查询 </span>
			</div>
			<br/>
			<div class="layui-form-item">
				<form class="layui-form" id="queryForm" action=""
					onsubmit='return false'>
					<div class="layui-form-item">
						<!-- 日期选择 -->
						<div class="layui-inline">
							<div class="layui-input-inline">
								<input type="text" class="layui-input" id="StartTime"
									placeholder="开始时间" lay-filter="startTime" name="startTime" autocomplete="off">
							</div>
						</div>
						<div class="layui-inline">
							<div class="layui-input-inline">
								<input type="text" class="layui-input" id="EndTime"
									placeholder="结束时间" lay-filter="endTime" name="endTime" autocomplete="off">
							</div>
						</div>
						
			            <div class="layui-inline">
			              <div class="layui-input-inline">
			              <select name="ContentType" id="ContentType" placeholder="全部查询" lay-filter="ContentType">
				              <option value="0">全部查询</option>
				              <option value="1">自动抽水</option>
				              <option value="2">手动抽放水</option>
			              </select>
			              </div>
                        </div>
						<div class="layui-inline">
							<div class="layui-input-inline">
								<button class="layui-btn layui-btn-normal" data-type="reload" id="SelectOrder">搜索</button>
							</div>
						</div>
					</div>

				</form>
			</div>
		</div>
			<div class="layui-form">
			  <table class="layui-table" lay-skin="nob" id="Statistics" lay-filter="Statistics"></table>
			</div>
			
			<div class="layui-form">
			  <table class="layui-table" lay-skin="nob" id="DailyStatistics" lay-filter="DailyStatistics"></table>
			</div>
    
    <script type="text/html" id="IsManual">
            {{#  if(d.IsManual === false){ }}
                <span class="layui-badge layui-bg-green">自动</span>
            {{#  } else if(d.IsManual === true){ }}
                <span class="layui-badge">手动</span>
            {{#  } }}
    </script>
    
    <script type="text/html" id="AfterChange">
            {{#  d.AfterChange =  d.Original + d.Delta}}
                <span>{{ d.AfterChange }}</span>
            {{#  }}
    </script>
    
    <script type="text/html" id="Delta">
            {{#  if(d.Delta <0){ }}
                <span>{{ d.Delta }}</span><span style="color:red">(抽水)</span>
            {{#  } else { }}
                <span>{{ d.Delta }}</span><span style="color:green">(放水)</span>
            {{#  } }}
    </script>
    
    <script type="text/html" id="TotalValue">
            {{#  if(d.TotalValue < 0){ }}
                <span>{{ d.TotalValue }}</span><span style="color:red">(抽水)</span>
            {{#  } else { }}
                <span>{{ d.TotalValue }}</span><span style="color:green">(放水)</span>
            {{#  } }}
    </script>
    
	<script src="js/jquery.min.js"></script>
	<script src="layui/layui.js" charset="utf-8"></script>
    
	<script>
	layui.use([ 'table', 'form', 'layer', 'laydate'], function() {
	     var layer = layui.layer
	     ,form = layui.form
	     ,laydate = layui.laydate
	     ,table = layui.table;
	     
	     table.render({
				elem : '#Statistics',
				url : 'Statistics/list',
				method : 'post',
				title : '抽放水统计表',
				totalRow : true,
				cellMinWidth : 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
				id:'AttTable',
				request:{
					pageName:'PageIndex',
					limitName:'PageCount'
				},
				where:{
					StartTime: $('#StartTime').val(),
					EndTime: $('#EndTime').val(),
					ContentType: $('#ContentType').val()
				}
				,
				cols : [ [ 
					{field : 'IsManual',title : '自动/手动',templet:'#IsManual'}, 
					{field : 'Original',title : '变化前水位'}, 
					{field : 'Delta',title : '变化量',templet:'#Delta'},
					{field : 'AfterChange',title : '变化后 水位',templet:'#AfterChange'}, 
					{field : 'Operater',title : '操作员'}, 
					{field : 'CreateTime',title : '操作时间'}
					] ],
				page : true,//分页
				response : {
					statusCode : 200
				//重新规定成功的状态码为 200，table 组件默认为 0
				},
				parseData : function(res) { //将原始数据解析成 table 组件所规定的数据
					return {
						"code" : res.status, //解析接口状态
						"msg" : res.message, //解析提示文本
						"count" : res.count, //解析数据长度
						"data" : res.data
					//解析数据列表
					};
				}
			});
	     
	     table.render({
				elem : '#DailyStatistics',
				url : 'DailyStatistics/listDetail',
				method : 'post',
				title : '抽放水次数统计表',
				totalRow : true,
				cellMinWidth : 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
				id:'AttTable2',
				request:{
					pageName:'PageIndex',
					limitName:'PageCount'
				},
				cols : [ [ 
					{field : 'TotalValue',title : '当天抽放水总和',templet:'#TotalValue'}, 
					{field : 'TotalCount',title : '当天抽放水总次数'}, 
					{field : 'StatTime',title : '统计对应的时间'}
					] ],
				page : true,//分页
				response : {
					statusCode : 200
				//重新规定成功的状态码为 200，table 组件默认为 0
				},
				parseData : function(res) { //将原始数据解析成 table 组件所规定的数据
					return {
						"code" : res.status, //解析接口状态
						"msg" : res.message, //解析提示文本
						"count" : res.count, //解析数据长度
						"data" : res.data
					//解析数据列表
					};
				}
			});

	     
	//日期选择器
	laydate.render({
	    elem: '#StartTime'
	    ,type: 'datetime' 
	  });
	laydate.render({
		elem: '#EndTime'
		,type: 'datetime' 
	});
	
	
	
	//根据条件查询表格数据重新加载
	  var active = {
		    reload: function(){
		    //获取用户名
		      //执行重载
		      table.reload('AttTable', {
		        page: {
		          curr: 1 //重新从第 1 页开始
		      }
		      //根据条件查询
		        ,where: {
					StartTime: $('#StartTime').val(),
					EndTime: $('#EndTime').val(),
					State: $('#State').val(),
					ContentType: $('#ContentType').val()
		        }
		      });
		    return false;
		   }
		};
	
	
	  //点击搜索按钮根据用户名称查询
	  $('#SelectOrder').on('click',
        function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
	  
	  setInterval(function(){
		  table.reload('AttTable', {
		      //根据条件查询
		      where: {
				StartTime: $('#StartTime').val(),
				EndTime: $('#EndTime').val(),
				ContentType: $('#ContentType').val()
		      }
		    });
		  table.reload('AttTable2', {});
        },60000);
});
</script>
</body>
</html>